<template>
  <div class="bottoms">
    <div class="box3" >
        <span  @click="gets(index)" v-for="(item,index) in tasklist" :key="index" :class="{active:currentIndex==index}">{{item.text}}</span>
    </div>
  </div>
</template>

<script>
export default {
    name:'bottoms',
    data(){
        return{
            currentIndex:3,
            tasklist:[
                {text:'首页'},
                {text:'订单'},
                {text:'我的'},
            ]
        }

    },
     methods:{
          gets(index){
            console.log(index);
            this.currentIndex=index
            
          }
        }
    

}
</script>

<style scoped>
.box3{
    height: 70px;
    border-top:1px solid black ;
    display: flex;
    justify-content: space-around;
   
}
span{
    list-style: none;
    display: flex;
    justify-content: space-around;
    line-height: 70px;
    font-size: 20px;
}
.box3 span.active{
    color: red;
}

</style>